<!-- 角色管理页面-->
<template>
	<div>
		<el-tabs v-model="activeName2" type="card" >
			<el-tab-pane label="角色管理" name="first">

			</el-tab-pane>
			<el-form :inline="true" ref="form" :model="pageAbout">
				<el-form-item label="名称" prop="roleName">
					<el-input placeholder="" v-model="pageAbout.roleName"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="resetForm('form')">重置</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="found">查找</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="add">添加</el-button>
					<!---->
				</el-form-item>
			</el-form>
		<!-- 数据列表 -->
			<div class="dateMsg" style="color: red" v-if="pageCount">总计<b>{{pageCount}}</b>条数据</div>
		<div style="margin-top:10px;">
			<el-table :data="tableData" style="width: 100%" v-loading="listLoading">
		      <el-table-column prop="roleName" label="名称"></el-table-column>
		      <!--<el-table-column prop="flag" label="所属"></el-table-column>-->
		      <el-table-column prop="roleDesc" label="角色描述"></el-table-column>
				<el-table-column prop="flag" label="启用/禁用" :formatter="banFormat">
				</el-table-column>
		      <el-table-column label="操作">
			      <template scope="scope">
			        <el-button size="small" type="text" @click="editRow(scope.row.id,'editActionDialog')">编辑</el-button>
					  <el-button v-if="scope.row.flag==1" type="text" size="small" @click="forBidden(scope.row.id,2)">启用</el-button>
					  <el-button v-else type="text" size="small" @click="forBidden(scope.row.id,1)">禁用</el-button>
			        <el-button size="small" type="text"  @click="del(scope.row.id)">删除</el-button>
			      </template>
			    </el-table-column>
		    </el-table>
		</div>
			<!--分页器-->
			<div  style="width:200px;margin-left:80%;margin-top: 10px">
				<el-pagination @current-change="getCurrentpage"
							   :page-size="10"
							   layout="prev, pager, next"
							   :total="pageCount">
				</el-pagination>
			</div>
		<!-- 权限编辑表单 -->
		<el-dialog title="角色授权" :visible.sync="dialog.editActionDialog.open" v-if="dialog.editActionDialog.open">
			<el-form ref="form" :model="roleinfo" label-width="80px">
				<el-form-item label="角色名称">
					<el-input v-model="roleinfo.roleName" style="width:200px"></el-input>
				</el-form-item>
				<el-form-item label="角色标识">
					<el-input  v-model="roleinfo.roleDesc" style="width:200px"></el-input>
				</el-form-item>
				<el-form-item label="启用/禁用">
					<el-select  placeholder="请选择" v-model="roleinfo.flag" style="width:120px">
						<el-option label="禁用" value="1"></el-option>
						<el-option label="启用" value="2"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<el-row :gutter="20">
				<el-col :span="6" style="background-color: gainsboro;padding:10px 10px"><div class="grid-content bg-purple">栏目</div></el-col>
				<el-col :span="18" style="background-color: gainsboro;padding:10px 10px"><div class="grid-content bg-purple">子模块</div></el-col>
			</el-row>
			<el-row :gutter="20" >
				<el-col :span="6" style="padding:10px 0">
					<el-checkbox  v-model="account" @change="handleCheckAllChange0">工作台</el-checkbox>
				</el-col>
				<el-col :span="18" style="padding:10px 0">
					<el-checkbox-group v-model="workP" @change="handleCheckedCitiesChange00">
						<el-checkbox v-for="item in workPlat" :label="item.id" :key="item.id" style="margin: 5px">{{item.name}}</el-checkbox>
					</el-checkbox-group>
				</el-col>
			</el-row>
			<el-row :gutter="20" >
				<el-col :span="6" style="padding:10px 0">
					<el-checkbox  v-model="sysAcc" @change="handleCheckAllChange1">系统账户管理</el-checkbox>
				</el-col>
				<el-col :span="18" style="padding:10px 0">
					<el-checkbox-group v-model="xtzhP" @change="handleCheckedCitiesChange11">
						<el-checkbox v-for="item in xtZh" :label="item.id" :key="item.id" style="margin: 5px">{{item.name}}</el-checkbox>
					</el-checkbox-group>
				</el-col>
			</el-row>
			<el-row :gutter="20" >
				<el-col :span="6" style="padding:10px 0">
					<el-checkbox  v-model="customer" @change="handleCheckAllChange2">客户管理</el-checkbox>
				</el-col>
				<el-col :span="18" style="padding:10px 0">
					<el-checkbox-group v-model="kehuP" @change="handleCheckedCitiesChange22">
						<el-checkbox v-for="item in cosManager" :label="item.id" :key="item.id" style="margin: 5px">{{item.name}}</el-checkbox>
					</el-checkbox-group>
				</el-col>
			</el-row>
			<!--<el-row :gutter="20" >-->
				<!--<el-col :span="6" style="padding:10px 0">-->
					<!--<el-checkbox  v-model="crm" @change="handleCheckAllChange3">CRM管理</el-checkbox>-->
				<!--</el-col>-->
				<!--<el-col :span="18" style="padding:10px 0">-->
					<!--<el-checkbox-group v-model="crmList" @change="handleCheckedCitiesChange33">-->
						<!--<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>-->
					<!--</el-checkbox-group>-->
				<!--</el-col>-->
			<!--</el-row>-->
			<!--<el-row :gutter="20" >-->
				<!--<el-col :span="6" style="padding:10px 0">-->
					<!--<el-checkbox  v-model="cms" @change="handleCheckAllChange4">CMS管理</el-checkbox>-->
				<!--</el-col>-->
				<!--<el-col :span="18" style="padding:10px 0">-->
					<!--<el-checkbox-group v-model="cmsList" @change="handleCheckedCitiesChange44">-->
						<!--<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>-->
					<!--</el-checkbox-group>-->
				<!--</el-col>-->
			<!--</el-row>-->
			<div style="margin: 40px 40px">
				<el-button type="primary" @click="sureBtn">确定</el-button>
			</div>
		</el-dialog>
		<!-- 权限删除 -->
		<el-dialog title="删除提示" :visible.sync="dialog.delActionDialog.open" size="tiny">
		  <span>确定要删除此数据吗?</span>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="closeDialog('delActionDialog')">取 消</el-button>
		    <el-button type="primary" @click="dialogBtnOk('delActionDialog')">确 定</el-button>
		  </span>
		</el-dialog>
		 <!--添加角色-->
		<el-dialog title="角色添加" :visible.sync="dialog.addRole.open" v-if="dialog.addRole.open" >
			<el-form ref="role" :model="addRole" :label-width="width" :label-position="position">
				<el-form-item label="角色名称" prop="roleName">
					<el-input placeholder="" v-model="addRole.roleName" style="width:200px"></el-input>
				</el-form-item>
				<el-form-item label="角色标识(唯一)" prop="roleDesc">
					<el-input placeholder="" v-model="addRole.roleDesc" style="width:200px"></el-input>
				</el-form-item>
				<el-form-item label="是否禁用" prop="flag">
					<el-select v-model="addRole.flag" placeholder="请选择" style="width:100px">
						<el-option label="禁用" value="1"></el-option>
						<el-option label="启用" value="2"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<el-button type="primary" style="margin:10px" @click="addNew">确定</el-button>
		</el-dialog>
	</el-tabs>
	</div>
</template>
<script>
import _http from '../common/http.vue'
import addActionDialog from './addActionDialog.vue'
export default{
	components:{addActionDialog},
	data(){
		return {
			width:"120px",
			position:'left',
			activeName2: 'first',
//			系统账户管理
			account:false,
//			用来接收所有系统账户的值
			accOptions:[],
//			分站管理
			substation:false,
			subList:[],
			listLoading:false,
//			字典管理
			dictionaries:false,
			dicList:[],
//			CRM管理
			crm:false,
			crmList:[],
//			CMS管理
			cms:false,
			cmsList:[],
//			多选框相关
			checkAll: true,
			checkedCities: [],

			isIndeterminate: true,
			//不大
			selectedActionList:[],
			menuFormInfo:{},
			pageAbout:{
				pageNumber:1,
				pageSize:10,
				roleName:''
			},
			upForm:{
				name:'',
				id:'0',
				state:''
			},
			userid:'',
			dataList:{
				actionTableList:[{
					name:'王虎',
					flag:'一级',
					mark:'很好'
				}],
				actionTableDataCount:0,
				selectActionList:[]
			},
			currentPage:1,
			pageCount:'',
			apiPort:{
//				分页数据接口
				dataList:'system/menu/list',
				roleList:'system/menu/getAllPermission',
				upEdit:'system/menu/grantAuth',
				getLimitid:'system/menu/getUserAuths',
				roleAll:'role/v1/findRoles',
				delApi:'role/v1/deleteRole',
				fobApi:'role/v1/changeFlag',
				addRole:'role/v1/addSysRole',
				roleInfo:'system/menu/getRoleInfo'
			},
			workPlat:'',
			workP:[],
			xtZh:'',
			cosManager:'',
			dialog:{
				delActionDialog:{
					open:false
				},
				addActionDialog:{
					open:false
				},
				editActionDialog:{
					open:false
				},
				addRole:{
					open:false
				}
			},
			form:{
				delActionFormInfo:{
					actionId:0
				},
				editActionFormInfo:{
					actionId:0,
					name:'',
					flag:'',
					mark:''
				}
			},
			formLabelWidth:'120px',
			workId:[],
			xtzhId:[],
			kehuId:[],
			sysAcc:[],
			xtzhP:[],
			customer:[],
			kehuP:[],
			roleLimitid:[],
			tableData:[],
			Sys_id:'',
			Work_id:'',
			Cust_id:'',
			id:'',
			addRole:{
				roleName:'',
				roleDesc:'',
				flag:''
			},
			roleinfo:{
				roleName:'',
				roleDesc:'',
				flag:""
			}
		}
	},
	mounted(){
		this.userid=localStorage.getItem('userId')
		this.pageAbout.userid = localStorage.getItem('userId')
		this.getRole()
		this.getCurrentpage(1)
//		this.getCurrentpage(1)
//		获取权限列表
//		this.getActionList()
//		this.getSelectActionList()
	},
	methods:{
//		角色添加
		add(){
			this.openDialog('addRole')
			this.addRole={
				roleName:'',
				roleDesc:'',
				flag:""
			}
		},
		getCurrentpage(val){
			this.listLoading=true
			var that = this
			this.currentPage = val ? val:1
			this.pageAbout.pageNumber=this.currentPage
			var params = that.querystring.stringify(this.pageAbout)
			_http.axiosRequest(that,that.apiPort.roleAll,params,(res)=>{
				that.pageCount=res.data.data.total
			console.log(res)
			this.listLoading=false
			that.tableData = res.data.data.records
		})
		},
		resetForm(formName){
			this.$refs[formName].resetFields();
		},
//		查找
		found(){
			this.getCurrentpage(1)
		},
//		添加
		addNew(){
			var that = this
			this.addRole.userid = this.userid
			var params = that.querystring.stringify(this.addRole)
			_http.axiosRequest(that,that.apiPort.addRole,params,(res)=>{
			console.log(res)
			if(res.data.code==100){
				that.$message({
					message:'添加成功',
					type:'success'
				})
				this.getCurrentpage(1)
				setTimeout(function(){
					that.closeDialog('addRole')
				},800)

			}else{
				that.$message({
					message:'添加失败',
					type:'waring'
				})
			}
		})
		},
//		删除
		del(id) {
			var that = this
			this.$confirm('此操作将删除该角色, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				var param = {id:id,userid:that.userid}
				var params = that.querystring.stringify(param)
				_http.axiosRequest(that,that.apiPort.delApi,params,(res)=>{
				console.log(res)
			if(res.data.code==100){
				that.$message({
					message: '删除成功',
					type: 'success'
				});
				that.getCurrentpage(that.currentPage)
			}else{
				that.$message({
					message: '操作失败',
					type: 'waring'
				});
			}
		})
		}).catch(() => {

			});
		},
		getRole(){
			var that = this
			var params = that.querystring.stringify({userid:this.userid,roleid:this.id})

			_http.axiosRequest(that,that.apiPort.roleList,params,(res)=>{
			console.log(res.data.data)
			that.Sys_id=res.data.data.x1.id
			that.Work_id=res.data.data.x2.id
			that.Cust_id=res.data.data.x3.id

			that.workPlat=res.data.data.workplat
			that.xtZh = res.data.data.xtzhgl
			that.cosManager = res.data.data.customer_manage
			for(var i in that.workPlat){
				that.workId.push(that.workPlat[i].id)
			}
			for(var j in that.xtZh){
				that.xtzhId.push(that.xtZh[j].id)
			}
			for(var k in that.cosManager){
				that.kehuId.push(that.cosManager[k].id)
			}
//			console.log(that.workPlat)
//			console.log(that.workId)
//			console.log('系统账户')
//			console.log(that.xtZh)
//			console.log(that.xtzhId)
//			console.log(that.kehuId)
		})
//			获取所有权限的id
		},
		//        启用禁用
		forBidden(id,par){
			var that = this
			var param = {id:id,flag:par,userid:that.userid}
			var params = that.querystring.stringify(param)
			_http.axiosRequest(that,that.apiPort.fobApi,params,(res)=>{
				console.log(params)
				console.log(res.data)
			that.getCurrentpage(that.currentPage)
//			that.closeDialog(param)
		})
		},
		banFormat:function(row,column){
			var ban = row[column.property];
			if ( ban == 1 ){
				return "禁用";
			}else{
				return "启用";
			}

		},
//		编辑获取值
		roleInfo(){
			var that = this
			var params = that.querystring.stringify({userid:this.userid,roleid:this.id})
			_http.axiosRequest(that,that.apiPort.roleInfo,params,(res)=> {
				console.log(res.data.data)
			that.roleinfo = res.data.data
			that.roleinfo.flag=res.data.data.flag+''
		})
		},
		editLimit(){
			var that = this
			var params = that.querystring.stringify({userid:this.userid,roleid:this.id})
			_http.axiosRequest(that,that.apiPort.getLimitid,params,(res)=>{
				console.log(res.data.data)
			that.roleLimitid=res.data.data
			var arr1 = []
			var arr2 = []
			var arr3 = []
			for(var i in that.roleLimitid){
				for(var j in that.workId){
					if(that.roleLimitid[i]==that.workId[j]){
						arr1.push(that.roleLimitid[i])
					}
				}
			}
//			console.log('看这里')
//			console.log(that.roleLimitid)
//			console.log(that.xtzhId)
			for(var a in that.roleLimitid){

				for(var k in that.xtzhId){

					if(that.roleLimitid[a]==that.xtzhId[k]){
						arr2.push(that.roleLimitid[a])
					}
				}
			}
			for(var i in that.roleLimitid){

				for(var j in that.kehuId){
					if(that.roleLimitid[i]==that.kehuId[j]){
						arr3.push(that.roleLimitid[i])
					}
				}
			}
			if(arr1.length){
				this.account=true
			}else{
				this.account=false
			}
			if(arr2.length){
				this.sysAcc=true
			}else{
				this.sysAcc=false
			}
			if(arr3.length){
				this.customer=true
			}else{
				this.customer=false
			}
			this.workP=arr1
			this.xtzhP=arr2
			console.log(arr1)
			console.log(arr3)
			this.kehuP=arr3
		})
		},
		sureBtn(){
//			Sys_id:'',
//					Work_id:'',
//					Cust_id:'',
			var that = this
			var arr = []
			if(that.workP.length>0){
				arr.push(that.Work_id)
			}
			if(that.xtzhP.length>0){
				arr.push(that.Sys_id)
			}
			if(that.kehuP.length>0){
				arr.push(that.Cust_id)
			}
			var a = that.workP.concat(that.xtzhP).concat(that.kehuP).concat(arr)
			console.log(a)
			var params = that.querystring.stringify({flag:that.roleinfo.flag,userid:this.userid,id:this.id,authid:a,roleName:that.roleinfo.roleName,roleDesc:that.roleinfo.roleDesc})
			_http.axiosRequest(that,that.apiPort.upEdit,params,(res)=>{
				console.log(res)
			if(res.data.code==100){
				that.$message({
					message:'编辑成功',
					type:'success'
				})
				setTimeout(function(){
					that.closeDialog('editActionDialog')
				},500)
			}else{
				that.$message({
					message:'操作失败',
					type:'waring'
				})
			}
		})

		},
		found(){
			this.getCurrentpage(1)
		},
//			工作台
		handleCheckAllChange0(event) {
			this.workP = event.target.checked ? this.workId : [];
		},
		handleCheckedCitiesChange00(value) {
			this.account=value.length ? true:false
//			this.workP = this.account ? this.accList : [];
		},
		//			系统账户管理
		handleCheckAllChange1(event) {
			this.xtzhP = event.target.checked ? this.xtzhId : [];
		},
		handleCheckedCitiesChange11(value) {
			this.sysAcc=value.length ? true:false
//			this.subList = this.substation ? this.subList : [];
		},
		//			客户管理
		handleCheckAllChange2(event) {
			this.kehuP = event.target.checked ? this.kehuId : [];
		},
		handleCheckedCitiesChange22(value) {
			this.customer=value.length ? true:false
//			this.dicList = this.dictionaries ? this.dicList : [];
		},
//		//			CRM管理
//		handleCheckAllChange3(event) {
//			this.crmList = event.target.checked ? this.crmList : [];
//		},
//		handleCheckedCitiesChange33(value) {
//			this.crm=value.length ? true:false
//			this.crmList = this.crm ? this.crmList : [];
//		},
//		//			CMS管理
//		handleCheckAllChange4(event) {
//			this.cmsList = event.target.checked ? this.cmsList : [];
//		},
//		handleCheckedCitiesChange44(value) {
//			this.cms=value.length ? true:false
//			this.cmsList = this.cms ? this.cmsList : [];
//		},
//		调用接口
//		获取当页参数
		getActionList(){
			this.goToPage(this.currentPage)
		},
		closeDialog(dialog){
			this.dialog[dialog].open = false
		},
		openDialog(dialog){
			this.dialog[dialog].open = true
		},
//		编辑
		editRow(id,dialog){
//
			this.id=id
			this.editLimit()
			this.openDialog(dialog)
			this.roleInfo()
		},
		dialogBtnOk(dialog){
			if (dialog == 'delActionDialog') {
				this.delAction(dialog)
			}else if(dialog == 'editActionDialog'){
				this.editAction(dialog)
			}
		},
//		删除权限
		delAction(dialog){
			_http.axiosRequest(this,'delActionInfo',{id:this.form.delActionFormInfo.actionId},(res)=>{
				if (_http.apiResult(this,res.data)) {
					this.getActionList()
					this.closeDialog(dialog)
				}
			})
		},
//		编辑权限
		editAction(dialog){
			_http.axiosRequest(this,'updateActionInfo',{form:this.form.editActionFormInfo},(res)=>{
				if (_http.apiResult(this,res.data)) {
					this.getActionList()
					this.closeDialog(dialog)
				}
			})
		},

	}
}
</script>